<template>
  <el-select clearable multiple ref="selectTable" popper-class="select-table" v-model="values" @clear="clearVal"
    @focus="selectFocus" @remove-tag="clearTag" class="select-table" @change="onChange">
    <div slot="empty" class="select-box">
      <div class="search-header" v-if="showSearch">
        <el-input v-model.trim="matCode" placeholder="输入编码" size="mini"></el-input>
        <el-button type="primary" size="mini" icon="el-icon-search" @click="getTableList">搜索
        </el-button>
      </div>
      <el-table v-loading="loading" :data="tableList" @row-click="chooseItem" v-if="dataKey == 'material'" :height="400">
        <el-table-column label="物料名称" align="center" prop="matName" />
        <el-table-column label="物料编码" align="center" prop="matCode" />
      </el-table>

      <el-table v-loading="loading" :data="tableList" @row-click="chooseItem" v-if="dataKey == 'user'" :height="400">
        <el-table-column label="用户名" align="center" prop="userName" />
        <el-table-column label="昵称" align="center" prop="nickName" />
      </el-table>

      <pagination :total="searchQuery.total" :page.sync="searchQuery.pageNum" :limit.sync="searchQuery.pageSize"
        layout="total, prev, pager, next, jumper" @pagination="getTableList" />
    </div>
  </el-select>
</template>
<script>
import { listMaterialInfo, } from "@/api/materialInfo/materialInfo";
import { listUser } from "@/api/system/user";
import request from '@/utils/request'

function listAlarmUser(query) {
  return request({
    url: "/system/user/userList",
    method: "get",
    params: query,
  });
}
import _ from "lodash";
export default {
  name: "MultipleSelect",
  dicts: ["mes_status"],
  props: {
    value: {
      type: [String, Number, Array],
      default: "",
    },
    dataKey: {
      type: String,
    },
    valueKey: {
      type: [String, Number],
    },
    dataRow: {
      type: [String, Number],
    },
    params: {
      type: [Object, String],
      default: "",
    },
  },
  data() {
    return {
      rowList: [],
      loading: false,
      flag: "",
      showSearch: true,
      matCode: "",
      tableList: [],
       values: [],
      searchQuery: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
      },
      listDataMap: {
        material: listMaterialInfo,
        user: listAlarmUser,
      },
    };
  },
  created() {
    this.flag = this.$attrs.flag;
    console.log(this.values)
  },
  watch: {
    value: {
      handler: "initValue",
      immediate: true,
      deep:true,
    },
  },
  methods: {
    clearTag() {
      console.log(this.values);
      var tar=this.rowList.filter( item=>{
        return  this.values.indexOf( item.nickName)!=-1
      })
      this.rowList=tar;
      this.$emit("on-change", this.rowList);
    },
    onChange(e) {
    },
    clearVal(val) {
      this.$emit("clearVal", this.name);
      this.values = null;
      this.matCode = null;
    },
    initValue(v) {
      console.log(v);
      this.rowList=v;
      this.values = v.map( item=>{
        return item.nickName
      });
    },
    getTableList() {
      let query = {
        ...this.searchQuery,
        status: 0,
        matCode: this.matCode,
      };
      if (this.params) {
        Object.assign(query, this.params);
      }
      this.loading = true;

      this.listDataMap[this.dataKey](query).then((res) => {
        if (res.code == 200) {
          this.searchQuery.total = res.total;
          this.tableList = res.rows;
          this.loading = false;
        }
      });
    },
    selectFocus() {
      this.infoName = "";
      this.searchQuery = {
        total: 0,
        pageNum: 1,
        pageSize: 10,
      };
      this.getTableList();
    },
    chooseItem(val) {
      if (this.dataRow || this.dataRow === 0) {
        val.rowIndex = this.dataRow;
      }
      val.dataKey = this.dataKey;
      var tar = _.cloneDeep(this.values);
      if (val.dataKey == "user") {
        if (tar.indexOf(val.nickName) === -1) {
          tar.push(val.nickName);
          this.values = tar;
          this.rowList.push(val)
        }
        this.$emit("on-change", this.rowList);
      }
      if (val.dataKey == "material") {
        if (tar.indexOf(val.matCode) === -1) {
          tar.push(val.matCode);
          this.values = tar;
        }
        this.$emit("on-change", this.values);
      }


    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .select-table {
  width: 100%;
}

.select-box {
  min-width: 600px;
  padding: 10px;
}

.el-select {
  width: 100%;
}

::v-deep .el-select-dropdown {
  padding: 10px 15px;
}

.select-table .search-header {
  display: flex;
}

.search-header {
  margin-bottom: 5px;
}

.search-header button {
  margin-left: 10px;
}
</style>
